<template>
  <div class="role-container">
    <!-- 1. 左边角色数据列表 -->
    <div class="left-wrapper">

      <div v-for="(item, index) in roleList" :key="item.roleId" class="role-item"
        :class="{ active: index === currentIndex }" @click="changeRole(index)">
        <div class="role-info">
          <!-- 专门用来显示 icons文件夹下面的svg图片的 -->
          <svg-icon :icon-class="index === currentIndex ? 'user-active' : 'user'" class="icon" />
          {{ item.roleName }}
        </div>

        <div class="more">
          <svg-icon icon-class="more" />
        </div>
      </div>

      <el-button class="addBtn" size="mini" @click="$router.push('/roleAdd')">添加角色</el-button>
    </div>
    <!-- 2. 右边角色数据列表 -->
    <div class="right-wrapper">

      <el-tabs v-model="activeName">
        <!-- 功能权限的内容 -->
        <el-tab-pane label="功能权限" name="tree">
          <div class="tree-wrapper">
            <div v-for="item in treeList" :key="item.id" class="tree-item">
              <!-- 这个是一级数据title -->
              <div class="tree-title">{{ item.title }}</div>
              <!-- 二级数据
          :props="{ label: 'title' }"  将服务器响应回来的title属性绑定到el-tree组件
          上的lable属性
           -->
              <el-tree node-key="id" ref="tree" show-checkbox default-expand-all :data="item.children"
                :props="{ label: 'title' }" />
            </div>
          </div>
        </el-tab-pane>

        <!-- 成员列表 -->
        <el-tab-pane :label="`成员列表(${roleUserList.length})`" name="member">
          <div class="user-wrapper">
            <el-table :data="roleUserList" style="width: 100%">
              <el-table-column type="index" width="250" label="序号" />
              <el-table-column prop="name" label="员工姓名" />
              <el-table-column prop="userName" label="登录账号" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 导入api
import { getRoleListAPI } from "@/api/system";
import {
  getTreeListAPI, getRoleDetailAPI, getRoleUserAPI,
} from "@/api/permiss";
// 定义递归函数实现数据属性的动态添加
function addDisabled(datas) {
  // 1. 遍历datas这个数组中的对象，动态添加Disabled：true
  /*
  data:{ id:1,title:'',children:[] }
  data:{ id:1,title:''}
  */
  datas.forEach((data) => {
    data.disabled = true;

    // 判断data对象中如果有children，则继续调用 addDisabled(data.children) 给下一层继续添加 disabled = true;
    if (data.children) {
      addDisabled(data.children);
    }
  });
}
export default {
  name: "Role",
  data() {
    return {
      roleList: [], // 角色列表
      currentIndex: 0, // 当前选中的索引
      treeList: [], // 权限树形列表
      activeName: "tree", // tabs组件默认选择名字为tree的panel
      roleUserList: [], // 当前角色下的成员列表
    };
  },
  methods: {
    // 封装获取当前角色下的成员的方法
    async getRoleUserList(roleId) {
      const res = await getRoleUserAPI(roleId);
      this.roleUserList = res.data.rows;
    },
    // 负责根据角色id请求服务器获取当前角色的权限数据
    async getRoleDetail(roleId) {
      const res = await getRoleDetailAPI(roleId);
      // console.log(res.data);
      // 3. 将获取到的权限数据赋值给treeList
      const pers = res.data.perms;
      const trees = this.$refs.tree;
      // 获取当前的el-tree组件
      // console.log();
      pers.forEach((items, index) => {
        // console.log(items, index);
        // console.log(items)
        trees[index].setCheckedKeys(items);
      });
      // 初始化角色下面的用户数据列表
      this.getRoleUserList(roleId);
    },
    // 获取所有的权限数据
    async getTreeList() {
      const res = await getTreeListAPI();
      // 属于权限数据的全部数据（1,2,3级数据）
      // 利用递归给res.data中的每一层的对象都添加一个disabled:true
      addDisabled(res.data);
      this.treeList = res.data;
      console.log(res.data);
      // // 获取当前的el-tree组件
      // console.log(this.$refs.tree)
    },
    // 点击当前角色触发
    changeRole(index) {
      this.currentIndex = index;

      // TODO:根据角色请求它的所属权限数据
      // 1. 获取当前角色的id
      const roleId = this.roleList[index].roleId;

      // 2. 根据id请求服务器获取当前角色的权限数据
      this.getRoleDetail(roleId);

      // 3. 将获取到的权限数据赋值给treeList
    },
    // 1. 调用api/system  getRoleListAPI方法获取数据
    async getRoleList() {
      // 1. 请求服务器获取数据
      const res = await getRoleListAPI();
      // 2. 赋值给响应式对象roleList
      this.roleList = res.data;

      console.log(res.data);
    },
  },
  async mounted() {
    // 2. 调用方法
    await this.getRoleList();
    await this.getTreeList();
    this.getRoleDetail(this.roleList[0].roleId);
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-tree-node__label {
  color: rgba(0, 0, 0, 0.3);
}

// 权限树选择高亮样式复写
::v-deep .el-tree-node__content label.el-checkbox.is-checked {
  span.is-checked .el-checkbox__inner {
    background-color: #0094ff;
  }
}

.role-container {
  display: flex;
  font-size: 14px;
  background-color: #fff;
  padding: 20px;

  .left-wrapper {
    width: 200px;
    border-right: 1px solid #e4e7ec;
    padding: 4px;
    text-align: center;

    .role-item {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      cursor: pointer;

      &.active {
        background: #edf5ff;
        color: #4770ff;
      }
    }

    .role-info {
      display: flex;
      align-items: center;

      .icon {
        margin-right: 10px;
      }
    }

    .more {
      display: flex;
      align-items: center;
    }

    .addBtn {
      width: 100%;
      margin-top: 20px;
    }
  }

  .right-wrapper {
    flex: 1;

    .tree-wrapper {
      display: flex;
      justify-content: space-between;

      .tree-item {
        flex: 1;
        border-right: 1px solid #e4e7ec;
        padding: 0px 4px;
        text-align: center;

        .tree-title {
          background: #f5f7fa;
          text-align: center;
          padding: 10px 0;
          margin-bottom: 12px;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap {
      padding-left: 20px;
    }

    .user-wrapper {
      padding: 20px;
    }
  }
}
</style>
